<template>
	<view>
		<view class="header">
			<view class="navbar">
				<view class="navbar-fixed">
					<!-- 状态栏小程序撑起高度 -->
					<view :style="{height:statusBarHeight+'px'}"></view>
					<view class="navbar-content" :style="{height:navBarHeight+'px',width:windowWidth+'px'}">
						<!-- <image src="../../static/image/back.png" @click="back()"></image> -->
						<view class="navbar-search">我的积分</view>
					</view>
				</view>
				<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）-->
				<view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
			</view>
			<view class="scoreinfo">
				<view class="titlebox">
					<view>收支/兑换记录</view>
					<image src="../../static/jt.png"></image>
				</view>
				<view class="infobox">
					<view>338</view>
					<view class="butbox">积分说明</view>
				</view>
			</view>
		</view>
		
		<view class="navbox">
			<view class="itembut">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" >
					<view class="hitem" v-for="(item,index) in list" :key="index" >
						{{item}}
						<image src="../../static/bx.png"></image>
					</view>
				</scroll-view>
			</view>
			<view class="allbut" @click="open()">
				全部
				<image src="../../static/qb.png"></image>
			</view>
		</view>
		<view style="height: 470rpx;"></view>
		<!-- 顶部弹窗 -->
		<uni-popup ref="popup" type="top" background-color="#fff">
			<view class="tiptype">
				<view class="boxitem">
					<view class="itembox" v-for="(item,index) in tiptypelist" :key="index"
					@click="changebx(item,index)" :style="{'color':index==bx?'#F94D29':'','border':index==bx?'2rpx solid #F94D29':''}">
						{{item}}
					</view>
				</view>
			</view>
		</uni-popup>
		<goods></goods>
	</view>
</template>

<script>
	import goods from '../../components/goods.vue'
	export default {
		components:{
			goods
		},
		data() {
			return {
				statusBarHeight: 20,
				/* 状态栏高度 */
				navBarHeight: 45,
				/* 导航栏高度 */
				windowWidth: 375,
				/* 窗口宽度 */
				/* 设定状态栏默认高度 */
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				list:['热门','分类','分类','分类','分类','分类','分类'],
				tiptypelist:['不限','销量','最新'],
				bx:'',//类型
			}
		},
		onShow() {
			this.getnav()
		},
		methods: {
			getnav() {
				// 获取手机系统信息
				const info = uni.getSystemInfoSync()
				// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
				this.statusBarHeight = info.statusBarHeight
				this.windowWidth = info.windowWidth
				// 除了h5 app mp-alipay的情况下执行
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				// 获取胶囊的位置
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				console.log(menuButtonInfo);
				// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
				this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
					.statusBarHeight)
				this.windowWidth = menuButtonInfo.left
				// #endif
			},
			togoodslist(){
				uni.navigateTo({
					url:'/pages/goodslist/goodslist'
				})
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			//打开弹窗
			open(){
				this.$refs.popup.open('top')
			},
			//选择分类
			changebx(item,index){
				this.bx = index
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.header{
		height: 372rpx;
		background: url(https://zdcloud.zxkjnc.com/images/b94c.png) no-repeat;
		width: 100%;
		background-size: 100% 372rpx;
		position: fixed;
		top:0;
		z-index:199;
	}
	.navbar {
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 399;
			width: 100%;
			// height: 102rpx;
			// padding-bottom: 20rpx;
			background: transparent;
	
	
			.navbar-content {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0rpx 30rpx;
				// height: 142rpx;
				box-sizing: border-box;
	
				image {
					width: 19rpx;
					height: 35rpx;
					margin-right: 20rpx;
				}
	
				.navbar-search {
					display: flex;
					align-items: center;
					// padding: 0 10px;
					width: 100%;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
				}
	
			}
		}
	}
	.scoreinfo {
		width: 650rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;
		.titlebox{
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			image{
				width: 11rpx;
				height: 19rpx;
				margin-left: 18rpx;
			}
		}
		.infobox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 52rpx;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: bold;
			color: #222222;
			height:118rpx;
			.butbox{
				width: 178rpx;
				height: 70rpx;
				background: linear-gradient(180deg, #F94D29 0%, #F99529 100%);
				box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(249,149,41,0.41);
				border-radius: 36rpx ;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #F7F7F7;
				text-align: center;
				line-height: 70rpx;
			}
		}
	}
	.navbox{
		width: 750rpx;
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #555555;
		position: fixed;
		z-index: 199;
		top: 372rpx;
		background-color: #FFF;
		.itembut{
			width: 620rpx;
			display: flex;
			.scroll-view_H {
					white-space: nowrap;
					width: 100%;
					.hitem{
						display: inline-block;
						position: relative;
						padding: 0 30rpx;
						image{
							position: absolute;
							z-index: 9;
							width: 30rpx;
							height: 20rpx;
							bottom: 0;
							left:0;
						}
					}
				}
		}
		.allbut{
			width: 100rpx;
			display: flex;
			align-items: center;
			image{
				width: 26rpx;
				height: 27rpx;
				margin-left: 6rpx;
			}
		}
	}
	.tiptype{
		width: 100%;
		padding-top: 470rpx;
		background-color: #FFF;
		.boxitem{
			display: flex;
			flex-wrap: wrap;
			width: 690rpx;
			padding: 40rpx 30rpx;
			.itembox{
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #999999;
				line-height: 72rpx;
				width: fit-content;
				padding: 0 50rpx;
				margin-right: 24rpx;
			}
		}
	}

</style>
